<template>
	<div style="background-color: #171717;" :style="{height:autoHeight}">
		<div style="font-size: 30px;font-weight: 500;margin-top: 1%;margin-left: 3%;margin-bottom: 1%;color: #fff;">个人信息
		</div>
		<div class="body">
			<div class="body2">
				<div :class="{'icon': !isMenu(0),'icon2': isMenu(0),'icon3': isMenu(0)}"
					style="display: flex;flex-direction: column;" @click="do_page(0)">
					<div class="icon4">
						<div class="row icon_box">
							<img class="icon_image" src="./image/icon/user_big_outlined.png" />
							<div class="icon_text1">账号信息</div>
						</div>
						<div class="icon_text2">账号基本信息</div>
					</div>
				</div>
				<div :class="{'icon': !isMenu(1),'icon2': isMenu(1),'icon3': isMenu(1)}"
					style="display: flex;flex-direction: column;" @click="do_page(1)">
					<div class="icon4">
						<div class="row icon_box">
							<img class="icon_image" src="./image/icon/lock_open_outlined.png" />
							<div class="icon_text1">修改密码</div>
						</div>
						<div class="icon_text2">使帐号更安全,建议您定期更换密码</div>
					</div>
				</div>
				<div :class="{'icon': !isMenu(2),'icon2': isMenu(2),'icon3': isMenu(2)}"
					style="display: flex;flex-direction: column;" @click="do_page(2)">
					<div class="icon4">
						<div class="row icon_box">
							<img class="icon_image" src="./image/icon/email_outlined.png" />
							<div class="icon_text1">换绑邮箱</div>
						</div>
						<div class="icon_text2">如原邮箱无法使用，建议进行换绑</div>
					</div>
				</div>
				<div :class="{'icon': !isMenu(3),'icon2': isMenu(3),'icon3': isMenu(3)}"
					style="display: flex;flex-direction: column;" @click="do_page(3)">
					<div class="icon4">
						<div class="row icon_box">
							<img class="icon_image" src="./image/icon/account_square_outlined.png" />
							<div class="icon_text1">实名认证</div>
						</div>
						<div class="icon_text2">支持个人及企业认证</div>
					</div>
				</div>
			</div>
			<!-- 账号信息 -->
			<div v-if="page==0">
				<div class="title_text">账号信息</div>
				<div class="body3">
					<div style="margin-right: 30px;">
						<div class="body3_text">用户名</div>
						<el-input class="body3_input" placeholder="请输入内容" v-model="from.userName" id="userName">
						</el-input>
					</div>
					<div style="margin-right: 30px;">
						<div class="body3_text">用户id</div>
						<el-input class="body3_input" placeholder="请输入内容" v-model="from.userId" :disabled="true">
						</el-input>
					</div>
					<div style="margin-right: 30px;">
						<div class="body3_text">注册时间</div>
						<el-input class="body3_input" placeholder="请输入内容" v-model="from.createTime" :disabled="true">
						</el-input>
					</div>
					<div style="margin-right: 30px;">
						<div class="body3_text">邮箱</div>
						<el-input class="body3_input" placeholder="请输入内容" v-model="from.mailbox" :disabled="true">
						</el-input>
					</div>
					<div style="margin-right: 30px;">
						<div class="body3_text">电话</div>
						<el-input class="body3_input" placeholder="请输入内容" v-model="from.phoneNumber" :disabled="true">
						</el-input>
					</div>
				</div>
				<div class="title_text">详细信息</div>

				<div class="body3">
					<div style="margin-right: 30px;">
						<div class="body3_text">真实姓名</div>
						<el-input class="body3_input" placeholder="请输入内容" v-model="from.realname" :disabled="true">
						</el-input>
					</div>
					<div style="margin-right: 30px;">
						<div class="body3_text">公司</div>
						<el-input class="body3_input" placeholder="请输入内容" v-model="from.company" id="company">
						</el-input>
					</div>
					<div style="margin-right: 30px;">
						<div class="body3_text">国家</div>
						<el-input class="body3_input" placeholder="请输入内容" v-model="from.country" id="country">
						</el-input>
					</div>
					<div style="margin-right: 30px;">
						<div class="body3_text">省份</div>
						<el-input class="body3_input" placeholder="请输入内容" v-model="from.province" id="province">
						</el-input>
					</div>
					<div style="margin-right: 30px;">
						<div class="body3_text">城市</div>
						<el-input class="body3_input" placeholder="请输入内容" v-model="from.city" id="city">
						</el-input>
					</div>
					<div style="margin-right: 30px;">
						<div class="body3_text">地区</div>
						<el-input class="body3_input" placeholder="请输入内容" v-model="from.area" id="area">
						</el-input>
					</div>
					<div style="margin-right: 30px;">
						<div class="body3_text">地址</div>
						<el-input class="body3_input" placeholder="请输入内容" v-model="from.address" id="address">
						</el-input>
					</div>
				</div>
				<div style="width: 80%;display: flex;justify-content: center;margin-top: 20px;">
					<div class="row new_work_order1"
						style="color: #fff;font-weight: 600;align-items: center;justify-content: center;cursor: pointer;"
						@click="changePersonalInformation()">
						保存修改
					</div>
				</div>

			</div>

			<!-- 修改密码 -->
			<div v-if="page==1">
				<div class="title_text">修改密码</div>
				<div class="body3">
					<div style="margin-right: 30px;">
						<div class="body3_text">旧密码</div>
						<el-input class="body3_input" placeholder="请输入内容" v-model="password.past_password" show-password
							id="oldPassword">
						</el-input>
					</div>
				</div>
				<div class="body3">
					<div style="margin-right: 30px;">
						<div class="body3_text">新密码</div>
						<el-input class="body3_input" placeholder="请输入内容" v-model="password.new_password" show-password
							id="newPassword">
						</el-input>
					</div>
					<div style="margin-right: 30px;">
						<div class="body3_text">确认密码</div>
						<el-input class="body3_input" placeholder="请输入内容" v-model="password.confirm_password"
							id="confirmPassword" show-password>
						</el-input>
					</div>
				</div>
				<div style="width: 80%;display: flex;justify-content: center;margin-top: 20px;"
					@click="changePassword()">
					<div class="row new_work_order1"
						style="color: #fff;font-weight: 600;align-items: center;justify-content: center;cursor: pointer;">
						保存修改
					</div>
				</div>
			</div>
			<!-- 绑定 -->
			<div v-if="page==2">
				<div class="title_text">绑定邮箱</div>
				<div class="body3">
					<div style="margin-right: 30px;">
						<div class="body3_text">邮箱状态:已绑定</div>
						<div>
							<el-input class="body3_input" placeholder="请输入用户密码" v-model="my_email_pass" id="password"
								show-password>
							</el-input>
						</div>
						<div style="margin-top: 10px;">
							<el-input class="body3_input" placeholder="请输入新邮箱" v-model="my_eamil" id="newMail">
							</el-input>
						</div>
						<el-input class="body3_input" style="margin-top:2%;width: 40%;" placeholder="请输入邮箱验证码"
							v-model="my_eamil_code" id="emailVCode">
						</el-input>
						<el-button
							style="margin-left: 20px;width: 20%;  font-size: 12px; padding: 0 5px; height: 23%; background-color: #434343;border: #7e7e7e; color: #fff; cursor: pointer;border-radius: 5px;"
							@click="sendEmailVcode()" v-if="!sending">发送验证码</el-button>
						<el-button
							style="margin-left: 20px;width: 20%; font-size: 12px; padding: 0 5px; height: 23%; background-color: #434343;border: #7e7e7e; color: #fff; cursor: wait;border-radius: 5px;"
							v-else>{{count}}</el-button>
					</div>
				</div>
				<div class="row new_work_order1"
					style="color: #fff;font-weight: 600;align-items: center;justify-content: center;margin-top: 10px;cursor: pointer;"
					@click="changeMail()">
					绑定邮箱
				</div>
			</div>
			<!-- 实名认证 -->
			<div v-if="page==3">
				<div class="title_text">实名认证</div>
				<div>提示：根据中国大陆规定，购买中国大陆产品需要进行实名认证。蓝竹云严格保密且不会泄露给第三方。</div>
				<div class="body3">
					<div style="margin-right: 30px;">
						<div class="body3_text">真实姓名</div>
						<el-input class="body3_input" placeholder="请输入内容" v-model="my_true_name" show-password>
						</el-input>
					</div>
				</div>
				<div class="body3">
					<div style="margin-right: 30px;">
						<div class="body3_text">证件号码</div>
						<el-input class="body3_input" placeholder="请输入内容" v-model="my_ID_card" show-password>
						</el-input>
					</div>
				</div>
				<div class="row new_work_order1"
					style="color: #fff;font-weight: 600;align-items: center;justify-content: center;margin-top: 10px;">
					提交认证
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import axios, {
		Axios
	} from 'axios';
	import {
		getUserInfo,
		changePassword,
		changeUserInfo
	} from '../../api/work.js'
	export default {
		data() {
			return {
				username: '',
				userid: '',
				myEmail: '',
				autoHeight: 'auto',
				page: 0,
				from: {},
				froma: {},
				password: {
					past_password: "",
					new_password: "",
					confirm_password: ""
				},
				my_true_name: '',
				my_ID_card: '',
				my_email_pass: '',
				my_eamil: '',
				my_eamil_code: '',
				count: 60,
				timer: null,
				sending: false
			}
		},
		computed: {
			// 计算属性
		},
		mounted() {
			this.JudgingLogin()
			this.userid = localStorage.getItem('userid');
			this.myEmail = localStorage.getItem('myEmail')
			this.getUser()

		},

		methods: {
			// 方法
			do_page(i) {
				if (i != 0) {
					this.autoHeight = '100%'
					this.page = i
				} else {
					this.autoHeight = 'auto'
					this.page = i
				}


			},
			test() {
				console.log('aaaaa')
			},
			isMenu(i) {
				if (i == this.page) {
					return true
				} else {
					return false
				}
			},
			//获取用户信息
			getUser() {
				let data = {
					user_id: this.userid
				}
				getUserInfo(data).then(res => {
					console.log("用户信息")
					console.log(res)
					this.from = res
					this.froma = {
						...res.data
					}
					localStorage.setItem('username', res.data.userName)
				})
			},
			//修改密码
			changePassword() {
				let oldPassword = document.getElementById('oldPassword').value.trim();
				let newPassword = document.getElementById('newPassword').value.trim();
				let confirmPassword = document.getElementById('confirmPassword').value.trim();

				if (newPassword != confirmPassword) {
					this.$message.warning('两次输入的密码不一致')
				} else {
					// 修改密码
					let data = {
						user_id: this.userid,
						old_pwd: oldPassword,
						new_pwd: confirmPassword
					}
					changePassword(data).then(res => {
						// this.$message.success(res.message)
						if (res.code != 200) {
							this.$message.warning(res.message)
						} else {
							this.$message.success(res.message)
						}
					})
				}
			},
			// 发送邮箱验证码
			sendEmailVcode() {
				var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				var newMail = {
					"mailbox": document.getElementById('newMail').value,
				}
				console.log("发送邮箱验证码")
				if (newMail.mailbox === null) {
					this.$message.warning('未填写邮箱');
				} else if (!reg.test(newMail.mailbox.trim())) {
					// 输入的不是邮箱
					this.$message.error("输入不是邮箱，请重新输入！！")
					this.my_eamil = ''
					return
				} else {
					this.sending = true
					this.timer = setInterval(() => {
						this.count--
						if (this.count === 0) {
							this.sending = false
							clearInterval(this.timer)
						}
					}, 1000)
					axios.post("http://45.145.75.2:8102/userlogin/registSendMailVcode", newMail)
						.then(res => {
							if (res.data.code != 200) {
								this.$message.warning(res.data.message)
							}

						})
				}
			},
			//换绑邮箱
			changeMail() {
				var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				let password = document.getElementById('password').value;
				var newMail = document.getElementById('newMail').value;
				let emailVCode = document.getElementById('emailVCode').value;

				if (this.myEmail === newMail) {
					this.$message.warning('输入的邮箱与当前绑定邮箱一致')
				} else if (password.trim().length === 0 || newMail.trim().length === 0 || emailVCode.trim().length === 0) {
					this.$message({
						message: '邮箱、密码和验证码为必填，请确认填写完毕',
						type: 'warning'
					});
				} else if (!reg.test(newMail.trim())) {
					// 输入的不是邮箱
					this.$message.error("输入不是邮箱，请重新输入！！")
					this.my_eamil = ''
					return
				} else {

					axios.get('http://45.145.75.2:8102/userlogin/changeMailBox?user_id=' + this.userid +
						'&password=' +
						password + '&newMailBox=' + newMail + '&emailVCode=' + emailVCode).then(res => {
						if (res.data.code != 200) {
							this.$message.warning(res.data.message)
						} else {
							this.$message.success(res.data.message)
						}
					})
				}
			},
			//修改个人信息
			changePersonalInformation() {
				console.log(this.from)
				console.log('#####')
				console.log(this.froma)
				const str1 = JSON.stringify(this.from);
				const str2 = JSON.stringify(this.froma);
				if (str1 === str2) {
					this.$message.warning('您未作出任何修改')
				} else {
					delete this.from.realname
					delete this.from.createTime
					console.log("修改的信息")
					console.log(this.from)
					// 修改个人信息
					let userInfo = {
						...this.from
					}
					changeUserInfo(userInfo).then(res => {
						if (res.data.code != 200) {
							this.$message.warning(res.data.message)
						} else {
							this.$message.success(res.data.message)
						}
					})
				}
			},
			// 判断登录
			JudgingLogin() {
				console.log("登录信息")
				console.log(localStorage.getItem("LZY-TOKEN"))
				// 弹出提示框 ，请先登录
				if (localStorage.getItem("LZY-TOKEN") == null) {
					this.openLoginMessage()
				}
			},
			openLoginMessage() {
				this.$alert('还未登录，请先登录！', '登录提醒', {
					confirmButtonText: '确定',
					callback: action => {
						this.$router.push({
							path: '/login',
						})
					}
				});
			}
		}
	};
</script>

<style>
	.body {
		width: 88%;
		padding: 3%;
		margin-left: 3%;
		background-color: #171717;
		border-radius: 3px;
		color: #fff;
	}

	.body2 {
		display: flex;
		justify-content: space-between;
	}

	.icon_box {
		cursor: pointer;
		align-items: center;
		margin-left: 5%;
	}

	.icon_text1 {
		font-size: 18px;
		font-weight: 600;
		margin-left: 10px;
	}

	.icon_image {
		height: 30px;
		width: 30px;
	}

	.icon_text2 {
		cursor: pointer;
		color: #9e9e9e;
		font-size: 15px;
		margin-left: 5%;
		margin-top: 3px;
	}

	.icon {
		/* background-color: blue; */
		width: 20%;
		height: 80px;
		align-items: center;
		justify-content: center;
		border-radius: 5px;
		transition-duration: .25s, 1s;
	}

	.icon2 {
		/* background-color: #ececec; */
		width: 20%;
		height: 80px;
		align-items: center;
		justify-content: center;
		border-radius: 5px;
	}

	.icon:hover {
		/* background-color: #ececec; */
		width: 20%;
		height: 80px;
		align-items: center;
		justify-content: center;
		border-radius: 5px;
		box-shadow: 0px 0px 1px 3px rgba(172, 172, 172, 0.5);
	}

	.icon3 {
		outline: none;
		border: none;
		/* background-image: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b); */
		background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #12bcfe, #00ddeb);
		align-items: center;
		justify-content: center;
	}


	.body3 {
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
	}

	.icon4 {
		display: flex;
		flex-direction: column;
		width: 96%;
		height: 72px;
		background-color: #171717;
		/* align-items: center; */
		justify-content: center;
		border-radius: 5px;
	}

	.title_text {
		font-size: 18px;
		/* font-weight: 600; */
		color: #b5b5b5;
		margin-top: 10px;
	}

	.body3_input {
		width: 30vw;
		background-color: dimgray;
		margin-left: 5px;
	}

	.body3_text {
		margin-top: 10px;
		margin-bottom: 4px;
	}

	.bangding {
		margin-top: 12px;
		margin-bottom: 5px;
	}

	.el-input__inner {
		background-color: #171717;
		color: #fff;
		border: 1px solid dimgray;
	}

	.el-input.is-disabled .el-input__inner {
		background-color: #171717;
		color: #fff;
		border: 1px solid dimgray;
	}

	.new_work_order1 {
		background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
		border: none;
		height: 40px;
		width: 130px;
		padding: 0 15px 0 15px;
		border-radius: 7px;
	}
</style>